<!--
 * @Author: 赵宇
 * @Description: 这是舞蹈房页面
 * @Date: 2024-02-18 15:55:11
 * @LastEditTime: 2024-12-18 23:36:44
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \dance\pages\dancingRoom\dancingRoom.vue
-->
<template>
  <view class="wd">
    <!-- 头部 -->
    <uv-status-bar bgColor="#fafafa" :customStyle="{ flexShrink: 0 }"></uv-status-bar>
    <!--自定义头部 -->
    <view class="wd-navbar">
      <!--自定义头部 -->
      <zy-navbar></zy-navbar>
    </view>
    <view class="wd-head">
      {{ ajaxData.data.headquater?.name }}
    </view>
    <view class="wd-tabs">
      <view class="flex-1 t-c" @click="goLink('#summarize')">概括</view>
      <view class="flex-1 t-c" @click="goLink('#curriculum')">课表</view>
      <view class="flex-1 t-c" @click="goLink('#teacher')">老师</view>
      <view class="flex-1 t-c" @click="goLink('#navigation')">导航</view>
    </view>

    <!-- 概括 -->
    <view class="wd-summarize" id="summarize">
      <view class="wd-summarize-bg">
        <uv-swiper :list="swiperImages" circular height="100%" class="wd-summarize-bg-swiper"></uv-swiper>
      </view>
      <view class="wd-summarize-info">
        <view class="name"> {{ ajaxData.data.headquater?.name }}{{ ajaxData.data.name }}</view>
        <view class="data">
          <view>舞房数：{{ ajaxData.data.rooms || 0 }}间</view>
          <view> 老师数：{{ (ajaxData.data.teacherCount && ajaxData.data.teacherCount.value) || 0 }} </view>
          <view> 课程数：{{ (ajaxData.data.lessonCount && ajaxData.data.lessonCount.value) || 0 }} </view>
        </view>
      </view>
    </view>
    <view class="wd-line">
      <uv-line color="#b1b1b1" margin="55.814rpx 0 125.581rpx 0"></uv-line>
    </view>
    <!-- 课表 -->
    <view class="wd-curriculum" id="curriculum">
      <view class="wd-curriculum-label"> 课表 </view>
      <!-- 日期横向滚动 -->
      <view class="wd-curriculum-list">
        <view
          v-for="(item, index) in params.list"
          :key="index"
          class="wd-curriculum-list-date"
          :class="item.allDate === params.allDate ? 'wd-curriculum-list-date-active' : ''"
          @click="onToggleTime(item)"
        >
          <view>{{ item.date }}</view>
          <view>{{ item.title }}</view>
        </view>
      </view>
      <view class="wd-curriculum-teacher">
        <view v-if="ajaxData.data?.lessons?.length">
          <template v-if="ajaxData.data.lessons.filter(r => r.issueDate === params.allDate).length">
            <view
              v-for="(item, index) in ajaxData.data.lessons.filter(r => r.issueDate === params.allDate).sort((l, r) => l._time - r._time)"
              :key="index"
              class="wd-curriculum-teacher-item"
              @click="goToDetail(item)"
            >
              <view class="item">
                <view class="avatar" @click.stop="onGoTeacher(item.teacher.id)">
                  <uv-avatar :src="item.teacher.profilePhoto || defaultImages[2]" size="141.279rpx" mode="aspectFill" />
                  <view class="avatar-name">
                    {{ item.teacher.username }}
                  </view>
                </view>
                <view class="content">
                  <view class="content-name">
                    {{ item.lesson.name }}
                  </view>
                  <view class="content-info">
                    <view class="time">
                      {{ item.timeDuration }}
                    </view>
                    <view class="grade">
                      {{ gradeOptions.find(r => r.val === item.lesson.grade).label }}
                    </view>
                  </view>
                </view>
              </view>
              <uv-line color="#d9d9d9" margin="0 0"></uv-line>
            </view>
          </template>
          <view v-else class="wd-curriculum-teacher-no">
            <view class="content">
              <view class="avatar">
                <uv-avatar :src="defaultImages[2]" size="120rpx" mode="aspectFill" />
              </view>
              <text>该日暂无课程安排</text>
            </view>
          </view>
        </view>
        <view v-else class="wd-curriculum-teacher-no">
          <view class="content">
            <view class="avatar">
              <uv-avatar :src="defaultImages[2]" size="120rpx" mode="aspectFill" />
            </view>
            <text>该日暂无课程安排</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 签约老师 -->
    <view class="wd-teacher" id="teacher">
      <view class="wd-teacher-label">签约老师</view>
      <view class="wd-teacher-content">
        <view v-for="(item, index) in ajaxData.data.teachers" :key="index" class="wd-teacher-avatar" @click="onGoTeacher(item.id)">
          <view class="image">
            <uv-avatar :src="item.profilePhoto || defaultImages[2]" size="169rpx" mode="aspectFill"></uv-avatar>
          </view>
          <view class="add" v-if="!item.collected.id" @click.stop="onCollect(item)"> + </view>
          <text class="text">{{ item.username }}</text>
        </view>
        <view class="content" v-if="!ajaxData.data.teachers?.length">
          <view class="avatar">
            <uv-avatar :src="defaultImages[2]" size="120rpx" mode="aspectFill" />
          </view>
          <text>暂无老师</text>
        </view>
      </view>
    </view>

    <!-- 位置信息 -->
    <view class="wd-navigation" id="navigation">
      <view class="wd-navigation-label">位置信息</view>
      <view class="wd-navigation-content">
        <view class="item">
          <uv-icon name="dingwei" custom-prefix="custom-icon" color="#959595" size="57.558rpx"></uv-icon>
          <text class="item-text">
            {{ ajaxData.data.location && ajaxData.data.location.province + ajaxData.data.location.district + ajaxData.data.location.detail }}
          </text>
        </view>
        <view class="item">
          <uv-icon name="dianhuahover" custom-prefix="custom-icon" color="#959595" size="57.558rpx"></uv-icon>
          <text class="item-text" @click="onPlay">{{ ajaxData.data.zPhone || '未获取' }}</text>
        </view>
      </view>
      <view class="flex flex-center flex-dir-column" @click.stop="goLocation">
        <uv-icon name="fei" custom-prefix="custom-icon" color="#FF7A66" size="35"></uv-icon>
        <text class="tips">导航</text>
      </view>
    </view>
    <view class="wd-line">
      <uv-line color="#b1b1b1" margin="127.326rpx 0 204.07rpx 0"></uv-line>
    </view>
    <uv-toast ref="toastRef"></uv-toast>
    <!-- 返回顶部  -->
    <uv-back-top
      :scroll-top="params.scrollTop"
      icon="arrow-up"
      text=""
      :iconStyle="params.customStyle"
      :customStyle="params.customStyle"
    ></uv-back-top>
  </view>
</template>

<script setup>
  import { onPageScroll, onLoad } from '@dcloudio/uni-app';
  import { ref, reactive, computed } from 'vue';
  import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js';
  import { defaultImages, defaultImagesList, gradeOptions } from '@/common/js/global.js';
  import { onGoTeacher,  } from '@/common/js/fn.js';
  import getDateInfo from '@/common/js/getDateInfo.js';

  const toastRef = ref();
  let routerVal = reactive({
    id: ''
  });
  let params = reactive({
    scrollTop: 0,
    customStyle: {
      backgroundColor: '#2979ff',
      color: '#fff'
    },
    list: [],
    allDate: ''
  });
  let ajaxData = reactive({
    teacher: [],
    teacherList: [],
    data: {}
  });
  let swiperImages = computed(() => {
    let arr = ajaxData.data?.licenses?.length ? ajaxData.data.licenses : [defaultImagesList[0]];
    return arr.map(r => r.imgPath || r);
  });

  const goLink = id => {
    var query = uni.createSelectorQuery();
    query.select(id).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(res => {
      uni.pageScrollTo({
        scrollTop: res[0].top + res[1].scrollTop
      });
    });
  };
  // 页面滚动事件
  onPageScroll(({ scrollTop }) => {
    params.scrollTop = scrollTop;
  });
  // 切换日期
  const onToggleTime = ({ allDate }) => {
    params.allDate = allDate;
  };
  // 初始化解决日期选项
  params.allDate = dayjs().format('YYYY-MM-DD');
  for (let index = 0; index < 4; index++) {
    let time = getDateInfo(dayjs().add(index, 'day').format('YYYY-MM-DD'));
    params.list.push({
      date: dayjs().add(index, 'day').format('DD'),
      allDate: dayjs().add(index, 'day').format('YYYY-MM-DD'),
      title: time.isToday ? '今' : time.isTomorrow ? '明' : time.dayOfWeek
    });
  }
  // 前往舞蹈详情
  const goToDetail = val => {
    uni.$uv.route({
      url: '/pages/main/course',
      params: {
        id: val.id
      }
    });
  };
  // 舞蹈房收藏
  let httpCollect = async () => {
    await uni.$uv.http.post(`app/collect/${!ajaxData.data.collected.id ? 'add' : 'cancel'}`, {
      classify: 'Merchant', //收藏类型
      objid: ajaxData.data.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    ajaxData.data.collected.id = ajaxData.data.collected.id ? 0 : 1;
    toastRef.value.show({
      overlay: false,
      message: `${ajaxData.data.collected.id ? '' : '取消'}收藏成功`,
      type: 'success'
    });
  };
  const onCollect = async val => {
    await uni.$uv.http.post(`app/collect/add`, {
      classify: 'Teacher', //收藏类型
      objid: val.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    val.collected.id = val.collected.id ? 0 : 1;
    toastRef.value.show({
      overlay: false,
      message: `收藏成功`,
      type: 'success'
    });
  };

  // 定位
  const goLocation = () => {
    let { location } = ajaxData.data;
    uni.openLocation({
      latitude: location.latitude, // 上海的纬度
      longitude: location.logitude, // 上海的经度
      name: location.city, // 地点名称
      address: location.district + location.detail, // 地址的详细说明
      scale: 18, // 缩放比例
      success: function (res) {},
      fail: function (err) {}
    });
  };
  // 远程请求课程详情
  let httpDetail = async () => {
    let data = await uni.$uv.http.post('app/merchant/detail', {
      id: routerVal.id
    });
    data.lessons = data.lessons || [];
    ajaxData.data = {
      ...data,
      lessons: data.lessons.map(r => {
        let arr = Number(r.price / 100)
          .toFixed(2)
          .toString()
          .split('.');
        return {
          ...r,
          _time: r.timeDuration.split('-')[0].replace(/\D/g, ''),
          inter: arr[0],
          decimal: arr[1]
        };
      }),
      zPhone: data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    };
  };
  onLoad(option => {
    routerVal.id = Number(option.id);
    ajaxData.teacher = [];
    httpDetail();
  });
  const onPlay = () => {
    uni.makePhoneCall({
      phoneNumber: ajaxData.data.phone
    });
  };
</script>

<style lang="scss" scoped>
  .wd {
    background-color: #fafafa;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Source Han Sans CN;
    color: #000000;
    box-sizing: border-box;
    font-size: 24.419rpx;
    &-navbar {
      margin-left: 23rpx;
      background-color: #fff;
    }
    &-head {
      background-color: #fff;
      padding-top: $dance-navbar-top-height;
      font-size: 41.86rpx;
      font-weight: bold;
      text-align: center;
      padding-bottom: 52.326rpx;
    }
    &-line {
      margin: 0 26.163rpx;
    }
    &-tabs {
      background-color: #fff;
      color: #959595;
      display: flex;
      font-size: 27.907rpx;
      padding-bottom: 24.419rpx;
      box-shadow: 0px 4px 4px 0px #00000040;
      z-index: 99;
    }
    &-summarize {
      &-bg {
        height: 6.7587rem /* 124px -> 6.7587rem */;
        &-swiper {
          border-radius: 0 !important;
        }
      }
      &-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #959595;
        font-size: 27.907rpx;
        .name {
          margin-top: 22.674rpx;
          margin-bottom: 36.628rpx;
        }
        .data {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
        }
      }
    }
    &-curriculum {
      flex: 1;
      flex-shrink: 0;
      &-label {
        font-size: 41.86rpx;
        text-align: center;
        font-weight: 700;
        padding-bottom: 22.674rpx;
      }
      &-list {
        background-color: #fff;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        height: 188.372rpx;
        align-items: center;
        justify-content: space-evenly;
        color: #959595;
        box-shadow: 0px 4px 4px 0px #0000000d;
        margin-bottom: 6.977rpx;

        &-date {
          height: 137.791rpx;
          width: 137.791rpx;
          border-radius: 19.186rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          flex-shrink: 0;
          font-size: 42rpx;
        }
        &-date-active {
          transition: all 0.5s;
          background-color: $dance-main-color;
          color: #fff;
        }
      }
      &-teacher {
        &-no {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          width: 100%;
          height: 192rpx;
          .content {
            background-color: #fff;
            border-radius: 20rpx;
            width: 97%;
            height: 167rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            .avatar {
              position: absolute;
              left: 10%;
            }
          }
        }
        &-item {
          width: 100%;
          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            background-color: #fff;
            overflow: hidden;
            margin-bottom: 2rpx;
            height: 191.86rpx;
            padding: 26.163rpx;
            box-sizing: border-box;
            .avatar {
              display: flex;
              align-items: flex-end;
              &-name {
                width: 87.209rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                transform: translateY(50%);
              }
            }
            .content {
              flex: 1;
              margin-left: 69.767rpx;
              font-size: 31.395rpx;
              font-family: Microsoft YaHei;
              color: #545454;
              height: 100%;
              &-name {
                margin-bottom: 27.907rpx;
              }
              &-info {
                display: flex;
                color: #959595;
                font-family: Source Han Sans CN;

                .grade {
                  width: 104.651rpx;
                  box-sizing: border-box;
                  background: rgba(97, 71, 178, 1);
                  font-size: 19.186rpx;
                  font-weight: 900;
                  text-align: center;
                  color: rgba(255, 255, 255, 1);
                  padding: 3px 10.465rpx;
                  margin-left: 101.163rpx;
                }
              }
            }
          }
        }
      }
    }

    &-teacher {
      margin-top: 125.581rpx;
      &-label {
        font-size: 41.86rpx;
        text-align: center;
        font-weight: 700;
      }
      &-content {
        margin-top: 29.651rpx;
        background-color: #fff;
        padding: 104.651rpx 0;
        box-shadow: 0px 4px 4px 0px #0000000d;

        .content {
          background-color: #fff;
          border-radius: 20rpx;
          width: 97%;
          height: 167rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          .avatar {
            position: absolute;
            left: 10%;
          }
        }
      }
      &-avatar {
        width: 30%;
        margin-right: 3%;
        margin-top: 1.0901rem /* 20px -> 1.0901rem */;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        font-size: 1.0901rem /* 20px -> 1.0901rem */;
        position: relative;
        .image {
          margin-bottom: 26rpx;
        }
        .add {
          width: 49rpx;
          height: 49rpx;
          border-radius: 50%;
          background-color: #ff7a66;
          position: absolute;
          top: 130rpx;
          right: 30rpx;
          color: #fff;
          line-height: 46rpx;
          text-align: center;
          font-size: 45rpx;
        }
        .text {
          width: 70%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
        }
      }
    }

    &-navigation {
      &-label {
        font-size: 41.86rpx;
        text-align: center;
        font-weight: 700;
        margin-bottom: 33.14rpx;
        margin-top: 125.581rpx;
      }
      &-content {
        margin: 0 90.698rpx;
        .item {
          margin-bottom: 61.047rpx;
          display: flex;
          align-items: center;
          &-text {
            margin-left: 34.884rpx;
            font-size: 15px;
            color: #959595;
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  .flex-1 {
    flex: 1;
  }
  .flex-y-center {
    align-items: center;
  }
  .flex-dir-column {
    flex-direction: column;
  }
  .t-c {
    text-align: center;
  }
  .flex-center {
    align-items: center;
    justify-content: center;
  }
  .mb-5 {
    margin-bottom: 9rpx;
  }
  .mb-15 {
    margin-bottom: 26rpx;
  }
  // 去除button的所有默认样式，让其表现跟普通的view、text元素一样
  .reset-button {
    padding: 0;
    background-color: transparent;
    /* #ifndef APP-PLUS */
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    /* #endif */
    /* #ifdef APP-NVUE */
    border-width: 0;
    /* #endif */
  }
</style>
